<template>
    <div class="piechartDiv">
        <div class="btnDiv">
            <a-button-group>
                <a-button type="primary"  @click="currentPie" ghost>
                    当前/续存配置
                  </a-button>
                  <a-button type="danger" @click="historyPie" ghost>到期/历史配置</a-button>
              </a-button-group>
        </div>
       
        <div style="width:500px;height:500px;margin: 0 auto;" ref="chart"></div>
    </div>
</template>
<script>
    const echarts = require('echarts');
    export default{
        name:'Piechart',
        props:{
            piechartData:{
                type:Object,
        }
    },
        data(){
            return{
            
            }
        },
        methods:{
            currentPie () {
                this.initCharts();
            },
            historyPie () {
                this.$emit('handlerClick','historyPie');
            },
            initCharts () {
             
                let myChart = echarts.init(this.$refs.chart);
                // 绘制图表
                    myChart.setOption({
                        title: {
                        text: '资产配置',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '<strong>{b}</strong> <br/> &nbsp;&nbsp;金额：{c}(元)<br/>&nbsp;&nbsp;占比：{d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'center',
                        top:'bottom',
                        data:this.piechartData.legends,
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: this.piechartData.chartData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                    });
                }
            },
        mounted() {          
            this.initCharts();
        },
    }
</script>
<style scoped>
    .piechartDiv{
        position:relative;
    }
    .btnDiv{
        position:absolute;
        right:10px;
        top:20px;
        padding:20px;
        z-index:100;
    }
    .btnDiv>button{
        margin-right:20px;
    }
</style>